<template>
  <view class="content">
    <view class="top-bar">
      <view class="search-div">
        <input
          type="search"
          placeholder="搜索用户/群"
          class="search"
          @input="search"
          placeholder-style="color:#aaa;font-weight:400;"
        />
      </view>
      <view class="top-bar-right">
        <view class="text">取消</view>
      </view>
    </view>
    
    <!-- 判断 searchlist 数组的长度 -->
    <view class="main" v-if="searchlist.length> 0">
      <view class="title">用户</view>
      <view class="search-user" v-for="item in searchlist" :key="item._id">
        <image :src="item.avatar" style="width: 80rpx;height:80rpx;"></image>
        <view class="names">
          <view class="name">{{item.name}}</view>
          <view class="email">dalichuqiji@163.com</view>
        </view>
        <view class="right-bt">发消息</view>
      </view>
      <view class="search-user">
        <image src="../../../static/logo.png" style="width: 80rpx;height: 80rpx;"></image>
        <view class=" names">
          <view class="name">大力出奇迹</view>
          <view class="email">dalichuqiji@163.com</view>
        </view>
        <view class="right-bts">加好友</view>
      </view>
    </view>
    
    <!-- 如果 searchlist 数组为空 -->
    <view class="main" v-else>
      <text>暂无好友</text>
      <view class="search-user">
        <image src="../../../static/logo.png" style="width: 80rpx;height: 80rpx;"></image>
        <view class="names">
          <view class="name">大力出奇迹</view>
          <view class="email">dalichuqiji@163.com</view>
        </view>
        <view class="right-bts">加好友</view>
      </view>
    </view>
    
  </view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	import request from '../../../utils/request.js'
	const searchlist = ref([])
	const id = ref('王海')
	onMounted(() => {
		search()
	})
	
	const search = async(e) => {
		if (e && e.target) {
			const searchValue = e.target.value
			// console.log(searchValue,222222222)
			const data=await request('/rxh/searchlist',{name:searchValue})
			// console.log(data);
			searchlist.value = data.data.data
			
			// uni.request({
			// 	url: 'http://62.234.216.141:4545/rxh/searchlist?name=' + searchValue,
			// 	method: 'GET',
			// 	data: {},
			// 	success: res => {
			// 		// console.log(res.data)
			// 		searchlist.value = res.data.data
			// 	}
			// })
		}
	}

</script>

<style lang="scss">
	.top-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 70rpx;
		width: 100vw;
		line-height: 70rpx;
	}

	.search-user {
		display: flex;
		justify-content: space-around;
		padding: 10rpx 0;
	}

	.title {
		padding: 20rpx;
	}

	.email {
		font-size: 22rpx;
	}

	.right-bt {
		text-align: center;
		background-color: yellow;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
	}

	.right-bts {
		text-align: center;
		background-color: skyblue;
		color: white;
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 20rpx;
	}
</style>